<template>
  <div id="header_base">
    <div id="h_ico">
      <img src="../assets/img/logo_1.png" alt="" />
    </div>
    <label id="fold" for="checkbox">
      <i class="el-icon-s-fold"></i>
    </label>
    <input type="checkbox" name="checkbox" id="checkbox" />
    <div id="h_nav">
      <div
        class="nav_font"
        :class="{ navActive: navDataLight === item }"
        v-for="(item, index) in navData"
        :key="index"
        @click="navActiveClick(item)"
      >
        <label
          for="xMuen"
          v-if="item === 'Data Collections'"
          @click="clickmuen()"
        >
          <div>
            {{ item }}
            <i v-if="isCollections" class="el-icon-caret-bottom"></i>
            <i v-if="!isCollections" class="el-icon-caret-top"></i>

            <input type="checkbox" name="" id="xMuen" />
            <div class="childenMuen">
              <div class="childenMuen_item">Toxicity Category</div>
              <div class="childenMuen_item">Multi-Dimensional Feature</div>
              <div class="childenMuen_item">Aggregated resource</div>
            </div>
          </div>
        </label>
        <span v-else @click="() => (isCollections = true)">{{ item }}</span>
      </div>
    </div>

    <!--<div id="side_mune">
      <div
        :class="{ navActive: navDataLight === item }"
        v-for="(item, index) in navData"
        :key="index"
        @click="navActiveClick(item)"
      >
        {{ item }}
      </div>
    </div>-->
  </div>
</template>

<script>
export default {
  data() {
    return {
      navDataLight: "Home",
      navData: [
        "Home",
        "Data Collections",
        "Search",
        "Donwload",
        "Statistics",
        "Benchmark",
        "Contact & About",
      ],
      isCollections: true,
    };
  },
  methods: {
    //控件header菜单激活
    navActiveClick(item) {
      this.navDataLight = item;
    },
    clickmuen() {
      //_.debounce(()=>{
      //  this.isCollections = !this.isCollections;
      //  console.log(this.isCollections)
      //},2000)
    },
  },
};
</script>

<style scopde lang="scss">
#header_base {
  position: relative;
  width: 100%;
  //height: 50px;
  display: flex;
  justify-content: space-between;
  #h_ico {
    width: 145px;
    height: 41px;
    padding: 5px 0 5px 50px;
    img {
      width: 145px;
      height: 41px;
    }
  }
  #h_nav {
    display: flex;
    justify-content: space-evenly;
    .nav_font {
      position: relative;
      height: 50px;
      line-height: 50px;
      font-size: 14px;
      font-family: Helvetica-Bold, Helvetica;
      font-weight: bold;
      color: #ffffff;
      margin-right: 32px;
      cursor: pointer;
      .childenMuen {
        display: none;
        position: absolute;
        top: 51px;
        .childenMuen_item:hover {
          background: linear-gradient(90deg, #05c4f8 0%, #22f483 100%);
        }
      }
      .childenMuen .childenMuen_item {
        padding-left: 10px;
        font-size: 14px;
        font-family: Helvetica-Bold, Helvetica;
        font-weight: bold;
        color: #ffffff;
        width: 200px;
        height: 41px;
        background: black;
      }
      input {
        display: none;
      }
      input:checked {
        & + .childenMuen {
          display: block;
        }
      }
    }
  }
  #side_mune {
    display: none;
  }
  //@media screen and (max-width: 960px) {
  //  #side_mune {
  //    display: block;
  //    position: absolute;
  //    top: 0;
  //    left: 0;
  //    width: 100px;
  //    height: 100vh;
  //  }
  //}
  #fold {
    display: none;
    height: 50px;
    line-height: 50px;
    font-size: 34px;
    font-family: Helvetica-Bold, Helvetica;
    font-weight: bold;
    color: #ffffff;
    & + input {
      display: none;
    }
  }

  .navActive {
    color: #11eae8;
    border-bottom: solid 1px #11eae8;
  }
}
@media screen and (max-width: 960px) {
  #header_base {
    width: 100%;
    flex-direction: column;
    #h_nav {
      display: none !important;
      display: flex;
      flex-direction: column;
      height: 210px;
      margin-top: 35px;
      //justify-content: space-evenly;
      .nav_font {
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        font-family: Helvetica-Bold, Helvetica;
        font-weight: bold;
        color: #ffffff;
        margin: 0px;
        text-align: center;
      }
    }
    #fold {
      display: block;
      position: absolute;
      top: 4px;
      right: 10px;

      & + input:checked {
        & + #h_nav {
          display: block !important;
        }
      }
    }
  }
}
</style>
